<template>
	<div>
		<van-tree-select v-model:main-active-index="activeIndex" height="96%" :items="surround" @click-nav="bindSurr">
			<template #content>
				<van-card
					v-for="(it,index) in goodsList" :key="it.id"
					:tag="it.sc"
					:desc="`主演：${it.star}`"
					:title="it.name"
					:thumb="`/api${it.img}`"
				>
					<template #tags>
						<van-tag plain type="danger" v-for="(it,index) in it.ver" :key="index">{{ it }}</van-tag>
					</template>
					<!-- 加入购物车 -->
					<template #footer>
						<van-button size="mini" color="#01cb88" @click="bindId(it)">查看详情</van-button>
						<van-button size="mini" color="red" @click="addCart(index)">加入购物车</van-button>
					</template>
				</van-card>
			</template>
		</van-tree-select>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { RequestMoveAPI, RequestTypesAPI } from '../../api/goods'
import { useRouter } from 'vue-router'
import Ajax from '../../api/axios';
import { useCounterStore } from '../../stores/users'
import { Toast } from 'vant';

const store = useCounterStore()
const router = useRouter()
const activeIndex = ref(0)
const goodsList = ref([])
// 电影
const surround = ref([])
let monveId = ref(0)

// 电影列表
async function bincss() {
	const res = await RequestTypesAPI()
	// console.log(res);
	surround.value = [
		{ text: '全部', name: '全部' },
		...res.data.map(it => ({
			text: it,
			name: it
		}))
	]
	// surround.value = data
	// console.log(surround.value)
}
// 电影数据列表
async function bindSurr(index) {
	const item = surround.value[index].text
	const res = await RequestMoveAPI()
	if (index === 0) {
		goodsList.value = res.data.rows
	} else {
		let list = res.data.rows.filter(subItem => {
			const arr = subItem.cat.split(',')
			if (arr.includes(item)) {
				return subItem
			}
		})
		console.log(list);
		goodsList.value = list
	}
}
function bindId(it) {
	monveId = it.id
	router.push({ path: '/details', query: { id: monveId } })
}
function addCart(_index) {
       Ajax({
        url:'/cart/add',
        method:'POST',
         data :{
            "userId": store.userInfo.id,
            "price":Math.floor(Math.random()*100+50),
            "id": goodsList.value[_index].id,
            "time": Date.now(),
            "count": 1,
            "name": goodsList.value[_index].name,
            "detailaddress": "待支付",
            "bgUrl": goodsList.value[_index].img
        }
       }).then(d => {
		console.log(d.code);
        if(d.code === 200) {
            Toast.success('添加成功')
        }else{
			Toast.fail('添加失败')
		}
       })
    }
onMounted(() => {
	bincss()
})
</script>

<style lang="scss" scoped></style>
